<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:72:"D:\phpStudy\WWW\ferr\public/../application/wechat\view\cons\businex.html";i:1493691807;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>我的订单</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <style>
        .erweima{
            display: block;
            height:30px;
            width: 30px;
            background: url("__IMG__/erweima1.png") no-repeat;
            background-size: cover;
            position: relative;
            top: 10px;
        }
        .shuaxin{
            display: inline-block;
            height: 22px;
            width: 22px;
            background: url("__IMG__/shuaxin.png") no-repeat;
            background-size: cover;
        }

        .myEquip{
            position: relative;
            top: -4px;
            margin-right: 10px;
        }
        .section1 .row{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
        .equipment{
            height: 27px;
            width: 26px;
        }
        .down{
            display: inline-block;
            height:22px;
            /*background: url("__IMG__/Down.png") no-repeat;*/
            /*background-size: cover;*/
        }
        .down.rotate{
            -webkit-transition:all 0.5s ease-in;
            transform-origin:50% 50%;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);   /* IE 9 */
            -moz-transform:rotate(180deg);  /* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg);    /* Opera */
        }
        .equipmentList.hide{
            display: none;
        }
        .section1{
            margin-top: 5px;
        }
        .sectionTop{
            margin-top: 70px;
        }
        .conts{
        	display: flex;
        	height: 28px;
    		line-height: 28px;
        }
        #contentBox .item{
        	display: block;
        	color: #595959;
        	padding: 0 40px;
        	border-bottom: 1px solid #dedede;
        	background: #fff;
        }
       
		/*.cont1 div,.cont2 div{
			display: inline-block;
		}*/
		.conts1 .name,.conts2 .state{
			/*width: 40vw;*/
			 -webkit-box-flex: 2;
		    -ms-flex: 2;
		    flex: 2;		
		}
		.conts1 .business,.conts2 .stime{
			/*width: 60vw;*/
			 -webkit-box-flex: 3;
		    -ms-flex: 3;
		    flex: 3;	
		    
		}
		.conts1 .business{
			text-align: center;	 
		}
		.state span{
			display: inline-block;
			height: 24px;
    		line-height: 24px;
    		width: 56px;
    		text-align: center;
    		padding: 0 5px;
    		border-radius: 9px;
    		
		}
		.hk{
			width:calc(100%/3);
		}
    </style>
</head>
<body>
<div id="contentBox">
    <nav class="navBox">
        <ul>
            <li @click="actShow($event,index)" v-for="(v,index) in navList" :class="index==active?'active':''">{{v.name}}</li>
        </ul>
        <span class="hk"></span>
    </nav>
    <div class="main">

        <ul class="orderList">
			<!--v-for="(list,index) in lists"-->
            <a :href="list.url" class="item" v-for="(list,index) in lists" style="margin-bottom: 0;">
                <div class="conts1 conts">
                    <div class="name">{{list.typeName}}</div>
                    <div class="business">{{list.title}}</div>
                </div>
                <div class="conts2 conts">
                  
                    <div class="stime">                    
                        <span>
                           	<b>{{list.time| timetrans(1)}}</b>
                        </span>
                    </div>
                </div>               
            </a>


        </ul>
    </div>
</div>
<script>
    var vm = new Vue({
        el:"#contentBox",
        data:{
            active:0,
            activeColor:["","",""],
            navList:[
                {name:"全部",view:"tab1"},
                {name:"产品订单",view:"tab2"},
                {name:"工程订单",view:"tab3"},
              
            ],  
            lists:[],
	        lists1:[],
	        lists2:[],
	        lists3:[],
	     
        },
        methods:{
            actShow:function(e,i){
                this.active = i;
                var w = $(".navBox ul li").eq(i).outerWidth();
                var left = $(".navBox ul li").eq(i).offset().left;
                $(".navBox .hk").stop().animate({
                    left:left+"px",
                    width:w+"px"
                },300);
//              console.log(i);
                if(i==0){
					this.lists=this.lists1;
				}else if(i==1){
					this.lists=this.lists2;
				}else if(i==2){
					this.lists=this.lists3;
				}
            }
        },
        created(){
        	var url="/index.php/manage/Affairbase/myJuryList";
        	var data;
       		var me=this;
        	$.post(url).then(function(res){       	
        			res = JSON.parse(res);
        			data=res.data;
        			if(data.length>0){
        				for(var i=0;i<data.length;i++){
        					me.lists1.push(data[i]);//全部
        					if(data[i].type==2){//产品订单
        						me.lists2.push(data[i]);
        						data[i].type="产品订单";
//      						me.activeColor[0]="orange";
        					}else if(data[i].type==3){//工程订单
        						me.lists3.push(data[i]);
        						data[i].type="工程订单";
//      						me.activeColor="red";
        					}
        				}
        			} 
        		
        		me.lists=me.lists1;		
//      		console.log(me.lists2);
			});	
        
        },
        mounted:function(){
            var w = $(".navBox ul li").eq(0).outerWidth();
//          $(".navBox .hk").css({width:w+"px"});
        }
    })

	Vue.filter("timetrans",function(date,type){
        var date = new Date(date*1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear();
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());        
        if(type==1){
          return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
        }else if(type==2){
          return Y+"/"+M+"/"+D;
        } else if(type==3){
          return M+"/"+D+" "+h+":"+m;
        }     
      });
    $(function(){

        var opt = {
            preset:'date', //日期
            theme:'android-ics light',//皮肤样式
            display:'modal', //显示方式
            mode:'scroller', //日期选择模式
            lang:'zh',
            dateFormat:'yy-mm-dd', // 日期格式
            setText:'确定', //确认按钮名称
            cancelText:'取消',//取消按钮
            dateOrder:'yy-mm-dd', //面板中日期排列格式
            width:'100%',
            timeWheels:'HHii', // 24小时制;
            timeFormat:'HH:ii',
            maxDate: new Date(),
            onSelect:function(val){
                var st = $("#startTime").val();
                var et = $("#endTime").val();
            }
        };
        $("#startTime").mobiscroll(opt);
        $("#endTime").mobiscroll(opt);
    })
</script>
</body>
</html>